import React from "react";
import { Button, message } from "antd";
import { Upload } from "../../components";
import axios from "axios";
import "./style.css";
const Index: React.FC = () => {
  const beforeUpload = (file: File) => {
    // 验证文件
    // 验证是不是图片
    if (!file.type.includes("image")) {
      message.error("只可以上传图片！！！");
      return false;
    }
    // 验证大小
    // file.size 单位是 Bit
    // 1tb = 1024gb = 1024 ** 2mb = 1024 ** 3kb = 1024 ** 4bit
    if (file.size > 2 * 1024 * 1024) {
      message.error("图片不可以超过2MB");
      return false;
    }
    return true;
  };

  const upload = async (file: File) => {
    // 需要转化为 FormData 格式
    // 1. 创建 formData 格式对象
    const formData = new FormData();
    // 2. 添加数据
    formData.append("chunk", file, file.name);
    // 3. 上传
    const resp = await axios.post("/api/upload", formData);
    console.log(resp.data);
  };

  return (
    <div>
      <Upload beforeUpload={beforeUpload} upload={upload}>
        <div className="upload">
          <span>拖拽上传文件</span>
          <Button type="primary">上传</Button>
        </div>
      </Upload>
			<img src="http://2009a-xmsz.oss-cn-shanghai.aliyuncs.com/1.png" alt="" />
    </div>
  );
};

export default Index;
